<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <title>智慧地图</title>
  <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/animate.css/4.1.1/animate.min.css" type="text/css"
    rel="stylesheet" />
  <link href="https://dtwl.wxmas.cn/map/css/index.css?ok=2" rel="stylesheet" />
  <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"
    type="application/javascript"></script>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/pixi.js/6.2.2/browser/pixi.min.js"
    type="application/javascript"></script>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/hammer.js/2.0.8/hammer.min.js"
    type="application/javascript"></script>
  <script src="https://dtwl.wxmas.cn/map/js/Tweenmax.min.js"></script>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/layer/3.5.1/layer.min.js"
    type="application/javascript"></script>
  <script src="https://dtwl.wxmas.cn/map/js/data.js?v=213"></script>

  <style>
    .zb {
      width: 20vw;
      position: absolute;
    }

    .look {
      position: absolute;
      right: 10px;
      top: 5px;
      font-size: 0.28rem;
      color: #f5f3f3;
      font-weight: bold;
    }
  </style>

</head>

<body>

  <div class="main" id="mainApp" style="width: 100vw;height: 100vh">
    <div class="container" id="container">
    </div>
    <div class="toolarea">
      <div class="toolheader">
        <div class="toolItem active" data="tourism">
          <div><img src="image/tourism.png" /> </div>
          <div class="toolItemTitle">热门景点</div>
        </div>
        <div class="toolItem" data="room">
          <div><img src="image/room.png" /> </div>
          <div class="toolItemTitle">酒店民宿</div>
        </div>
        <div class="toolItem" data="food">
          <div><img src="image/food.png" /> </div>
          <div class="toolItemTitle">当涂味道</div>
        </div>
        <div class="toolItem" data="shopping">
          <div><img src="image/Shopping.png" /> </div>
          <div class="toolItemTitle">旅游产品</div>
        </div>

      </div>
    </div>

  </div>

</body>
<script>
  var app = null;
  var mapSprite = null;
  var screenWidth = 0;
  var screenHeight = 0;
  var minScale = 0.2;
  var maxScale = 1;
  var currentScale = 0;
  var tCurrentItem = null;
  var width = 0;
  var height = 0;
  var step = 0.003;   // 缩放率
  var img = null;
  var zIndex = 0;
  var isTouch = false;
  var currentZhanDian = "";
  var mapUrl = "image/map.jpg?v=2";
  var currentInfo = { width: 0, height: 0 };
  var tCurrentItem2 = null;

  $(function () {
    var container = document.getElementById('container');
    var containerStyle = getComputedStyle(container);
    screenWidth = parseInt(containerStyle.width, 10);
    screenHeight = parseInt(containerStyle.height, 10);
    app = new PIXI.Application({
      width: screenWidth, height: screenHeight, backgroundColor: 0x5bb671, resolution: 4
    });
    app.renderer.autoDensity = true;
    app.renderer.resize(screenWidth, screenHeight);
    container.appendChild(app.view);
    const containerStage = new PIXI.Container();
    app.stage.addChild(containerStage);
    img = new Image();
    img.onload = function () {
      var texture = PIXI.Texture.from(mapUrl);
      // Scale mode for pixelation
      mapSprite = new PIXI.Sprite(texture);
      width = img.width;
      height = img.height;
      mapSprite.sortableChildren = true;
      subscribe(mapSprite);
      mapSprite.x = -screenWidth / 2;
      mapSprite.y = -(img.height + screenHeight) / 2;
      containerStage.addChild(mapSprite);
      //minScale=Math.max(screenWidth/width,screenHeight/height);  .21
      minScale = Math.max(screenWidth / width, screenHeight / height);
      // console.log('%c [minScale]: ', 'color: #bf2c9f; background: pink; font-size: 13px;', minScale)
      //加载默认数据
      data.tourism.map(item => {
        addSpriteChild(item);
      })
      setTimeout(function () {
        app.stage.pivot.set(0.5, 0.5);
        TweenMax.to(app.stage.scale, 2, { x: minScale, y: minScale });
        TweenMax.to(mapSprite, 2, { x: -300, y: 0 });//调整背景图精灵位置 默认 x:0,y:0
        currentInfo = { width: app.stage.width, height: app.stage.height };
        currentScale = minScale;

      }, 1000)

    };
    img.src = mapUrl;
    var hammertime = new Hammer(document.getElementById('mainApp'));
    hammertime.get('pinch').set({ enable: true });
    hammertime.on("pinch", function (ev) {
      isTouch = true;
    }).on("pinchin", function (ev) {
      changeMapSize(-1)
    }).on("pinchout", function (ev) {
      changeMapSize(1)
    }).on("pinchend", function (ev) {

    });


  })

  function onClick(event) {
    let currentEvent = event.currentTarget;
    // console.log('点击原始据',event);
    zIndex = event.currentTarget.zIndex = zIndex + 1;
    mapSprite.children.map(item => {
      if (item.id == currentEvent.id) {
        ShowCell(item);
        //console.log('点击数据',item);
        tCurrentItem2 = item;
      }
    })

  }
  /***
 * 展示单个节点
 * @constructor
 */
  function ShowCell(item) {
    if (app.stage.scale.x != 0.6) {
      changaMapScale(item.id, 0.6);
    }
    currentInfo = { width: app.stage.width, height: app.stage.height };
    getCurrentLocation(item);

  }
  /***
  * 获取当前的坐标位置
  */
  function getCurrentLocation(item) {
    layer.confirm(`点击确定了解【${item.name}】更多详情`, {
      title:'提示',
      btn: ['确定', '取消'] //按钮
    }, function () {
      let blankData = { 'id': item.id, 'opentype': item.opentype, 'cid': item.cid };
        wx.miniProgram.navigateTo({
      url: `/pages/${blankData.opentype}/detail?id=${blankData.cid}`
    })
    }, function () {
      layer.closeAll();
    });
  
  }




  function subscribe(obj) {
    obj.interactive = true;
    obj.on('mousedown', onDragStart)
      .on('touchstart', onDragStart)
      .on('mouseup', onDragEnd)
      .on('mouseupoutside', onDragEnd)
      .on('touchend', onDragEnd)
      .on('touchendoutside', onDragEnd)
      .on('mousemove', onDragMove)
      .on('touchmove', onDragMove);
  }

  function onDragStart(event) {
    if (!this.dragging) {
      this.data = event.data;
      this.dragging = true;
      this.dragPoint = event.data.getLocalPosition(this.parent);
      this.dragPoint.x -= this.x;
      this.dragPoint.y -= this.y;
    }
  }

  function onDragEnd() {
    if (this.dragging) {
      this.dragging = false;
      this.data = null;
    }
  }

  function onDragMove() {
    if (this.dragging && !isTouch) {
      const newPosition = this.data.getLocalPosition(this.parent);
      this.x = newPosition.x - this.dragPoint.x;
      this.y = newPosition.y - this.dragPoint.y;
      if (this.x > 0) this.x = 0;
      if (this.y > 0) this.y = 0;
      if (this.x < -(app.stage.width - screenWidth) / app.stage.width * 3200) this.x = -(app.stage.width - screenWidth) / app.stage.width * 3200;
      if (this.y < -(app.stage.height - screenHeight) / app.stage.height * 3793) this.y = -(app.stage.height - screenHeight) / app.stage.height * 3793;

    }
  }


  var start = [];
  document.addEventListener("touchstart", function (e) {
    //手指按下时的手指所在的X，Y坐标

  }, false);

  //监听 touchmove 事件 手指 移动时 做的事情
  document.addEventListener("touchmove", function (e) {
    e.preventDefault();
  }, false);

  //监听 手指离开屏幕时
  document.addEventListener("touchend", function (e) {
    //将 isTouch 修改为false  表示 手指已经离开屏幕
    isTouch = false;
  }, false);


  /**
   * 修改画布的大小
   * scale -1 或者 1
   */
  function changeMapSize(scale) {

    let canScale = scale > 0 ? app.stage.scale.x + step : app.stage.scale.x - step;
    canScale = Math.min(maxScale, Math.max(canScale, minScale));
    app.stage.scale.x = canScale;
    app.stage.scale.y = canScale;
    dotSprite(.9);
    //调整位置
    let nowX = currentInfo.width - app.stage.width;
    let nowY = currentInfo.height - app.stage.height;
    mapSprite.x += nowX / 2;
    mapSprite.y += nowY / 2;
    currentInfo = { width: app.stage.width, height: app.stage.height };
    changePosition();
  }

  window.addEventListener("mousewheel", function (event) {
    event.preventDefault();
    changePosition();
    if (event.wheelDelta < 0) {
      app.stage.scale.x -= step;
      app.stage.scale.y -= step;
    }
    else {
      app.stage.scale.x += step;
      app.stage.scale.y += step;

    }
    app.stage.scale.x = Math.min(maxScale, Math.max(app.stage.scale.x, minScale));
    app.stage.scale.y = Math.min(maxScale, Math.max(app.stage.scale.x, minScale));
    dotSprite(Math.min(maxScale, Math.max(app.stage.scale.x, minScale)));

    //调整位置
    let nowX = currentInfo.width - app.stage.width;
    let nowY = currentInfo.height - app.stage.height;
    mapSprite.x += nowX / 2;
    mapSprite.y += nowY / 2;
    currentInfo = { width: app.stage.width, height: app.stage.height };
  }, { passive: false })

  $(".toolItem").click(function () {
    var type = $(this).attr("data");
    $(".toolItem").removeClass("active");
    $(this).addClass("active");
    removeChild();
    setTimeout(function () {
      let datas = data[type];
      datas.map(item => {
        addSpriteChild(item);
      });

    }, 500)
  });
  //自动加载数据


  //添加精灵类型坐标
  function addSpriteChild(item) {
    var hasChild = false;
    mapSprite.children.map(theItem => {
      if (theItem.id == item.id) {
        theItem.visible = true;
        hasChild = true;
      }
    })
    if (!hasChild) {
      var texture = PIXI.Texture.from(item.img);
      let itemSprite = new PIXI.Sprite(texture);
      itemSprite.interactive = true;
      itemSprite.buttonMode = true;
      itemSprite.name = item.name;
      itemSprite.opentype = item.opentype ?? 'index';
      itemSprite.cid = item.cid ?? 1;
      itemSprite.type = item.type ? item.type : "dot";
      itemSprite.id = item.id;
      if (item.opentype == "food" || item.opentype == "product") {
        itemSprite.zIndex = 1;
        itemSprite.anchor.set(.2);
        //设置精灵的缩放
        itemSprite.scale.set(1.4);
        itemSprite.zIndex = item.zOrder ? item.zOrder : 2;
      }
      else {
        itemSprite.anchor.set(.2);
        //设置精灵的缩放
        itemSprite.scale.set(.8);
        itemSprite.zIndex = item.zOrder ? item.zOrder : 2;
      }
      let location = item.location.split(",");
      itemSprite.position.x = location[0];
      itemSprite.position.y = location[1];
      itemSprite.on('tap', onClick);
      mapSprite.addChild(itemSprite);

    }
  }





  function changaMapScale(itemid, scale = 0.8, parentId) {
    stageScale(scale);
    dotSprite(0);
    if (parentId) {
      mapSprite.children.map(item => {
        if (item.id == parentId) {
          var nowzhan = null;
          zhans.map(item2 => {
            if (item2.id == parentId) {
              nowzhan = item2;
            }
          })
          if (nowzhan.center) {
            let location = nowzhan.center.split(",");
            mapSprite.x = -location[0];
            mapSprite.y = -location[1];
          }
        }
      })
    }
    else {
      mapSprite.children.map(item => {
        if (item.id == itemid) {
          mapSprite.x = -item.x + screenWidth * 3 / 4;
          mapSprite.y = -item.y + screenHeight * 5 / 7;
          zIndex = item.zIndex = zIndex + 1;
        }
      })
    }
  }



  //移除子元素
  function removeChild() {
    mapSprite.children.map(item => {
      if (item.type != "zhan") {
        item.visible = false;
      }
    });
  }


  /**
   *
   * @param itemid
   * @param type   1获取数据的节点    2获取精灵的节点
   * @returns {null}
   */
  function getItemData(itemid, type = 1) {

    if (itemid.indexOf("_") > 0) {
      if (type == 1) {
        let value = itemid.split("_");
        let datas = data[value[0]];
        var nowitem = null;
        datas.map(item => {
          if (item.id == itemid) {
            nowitem = item;
          }
        })
        return nowitem;
      }
      else if (type == 2) {
        var nowitem = null;
        mapSprite.children.map(item => {
          if (item.id == itemid) {
            nowitem = item;
          }
        })
        return nowitem;
      }
    }

  }


  /**
   * 获取位置导航
   */
  function goLocation() {

    console.log("tCurrentItem.coordinate", tCurrentItem.coordinate);
    if (tCurrentItem.coordinate) {
      var coordinate = tCurrentItem.coordinate.split(",");
      common.openLocation(coordinate[0], coordinate[1], tCurrentItem.name, tCurrentItem.address);
    }

  }




  /**
   * 放大缩小画布比例
   * @param sacle
   */
  function stageScale(sacle) {
    app.stage.scale.x = sacle;
    app.stage.scale.y = sacle;
    currentInfo = { width: app.stage.width, height: app.stage.height };
    currentScale = sacle;
  }


  /**
   * 保证坐标精灵的大小
   */
  function dotSprite(scale) {
    mapSprite.children.map(item => {
      if (item.type != "zhan") {
        if (scale == 0) {
          item.scale.x = 1;
          item.scale.y = 1;
        }
        else {
         // console.log('[ 我被触发了 ] >', scale)
          let cj = scale - currentScale;
          var value = item.scale.x - cj;
          item.scale.set(scale)
          // if (value > 1.5) value = sacle;
          // if (value < 0.4) value = 0.4;
          // item.scale.x = value;
          // item.scale.y = value;
        }


      }
    })
  }

  /***
   * 动态修改位置
   */
  function changePosition() {
    if (mapSprite.x > 0) mapSprite.x = 0;
    if (mapSprite.y > 0) mapSprite.y = 0;
    if (mapSprite.x < -(app.stage.width - screenWidth) / app.stage.width * 3200) mapSprite.x = -(app.stage.width - screenWidth) / app.stage.width * 3200;
    if (mapSprite.y < -(app.stage.height - screenHeight) / app.stage.height * 3793) mapSprite.y = -(app.stage.height - screenHeight) / app.stage.height * 3793;

  }

  function addChild(item) {
    var location = item.location.split(",");
    var x = (mapSprite.x + location[0]) * app.stage.width / 3200;
    var y = (mapSprite.y + location[1]) * app.stage.width / 3200;
    if ($("#" + item.id).length <= 0) {
      $("#mainApp").append("<img id='" + item.id + "' class='zb' style='top:" + y + "px;left:" + x + "px' src='" + item.img + "'/>");
    }
  }




</script>

</html>